@extends('admin.common.main')

@section('css')
    {{--    webuploader上传样式--}}
    <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">


@endsection

@section('cnt')
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span> 文章管理
        <span class="c-gray en">&gt;</span> 修改文章
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="page-container">
        @include('admin.common.errors')
        {{--        enctype="multipart/form-data" --}}
        <form action="{{ route('admin.article.update', $article) }}" method="post" ref="frmfuck" class="form form-horizontal" >
{{--            @method('PUT') 这里非要用ajax实现，所以不用这句了--}}
{{--            @csrf  这里非要用ajax实现，所以不用这句了--}}

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>>文章标题：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="title" v-model="info.title">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>>文章描述：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="desn" v-model="info.desn">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3">
                    <span class="c-red">*</span>>文章封面：
                </label>
                <div class="formControls col-xs-4 col-sm-5">
                    {{--                    <input type="file" class="input-text" name="pic"> --}}

                    {{--                    表单提交时的封面地址--}}
                    <input type="hidden" name="pic" id="pic" v-model="info.pic">
                    <div id="webuploader_picker">异步上传文章封面webuploader</div>
                </div>
                <div class="formControls col-xs-4 col-sm-4">
                    <img :src="info.pic" id="img" style="width: 100px;">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>>文章内容：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <textarea name="body" id="body" cols="30" rows="10"></textarea>
                </div>
            </div>
            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="button" @click="postupdate" value="修改文章">
                </div>
            </div>
        </form>
    </article>
@endsection

@section('js')
    <!--引入webuploader的JS-->
    <script type="text/javascript" src="/webuploader/webuploader.js"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
    <!-- 引入vue -->
    <script src="/js/vue.js"></script>
    <!-- 实例化编辑器 把上面textarea的 id="body" 搞过来,注意是id-->
    <script type="text/javascript">
        //vue管理
        new Vue({
            data: {
                info: {!! $article !!}
            },
            //组件挂载完毕, vue在前，富文本确保在后
            mounted() {
                //富文本编辑器
                this.ue = UE.getEditor('body', {
                    initialFrameHeight: 300
                });
                //等富文本ready后，才设置内容
                this.ue.addListener("ready", ()=> {
                    //设置富文本内容
                    this.ue.setContent(this.info.body);
                    //this.ue.execCommand('insertHtml', '你好世界');
                    //this.ue.focus() //确保ue加载完成后，放入内容
                })

                //上传
                //webuploader
                this.uploader = WebUploader.create({
                    //选完文件后，是否自动上传
                    auto: true,
                    // swf文件路径
                    swf: '/webuploader/Uploader.swf',
                    // 文件接收服务端。 上传PHP的代码
                    server: '{{ route('admin.article.upfile') }}',
                    //文件上传时携带的参数
                    formData:{
                        _token: '{{ csrf_token() }}'
                    },
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.

                    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                    resize: true,
                    //文件上传时的表单名称,后端$request->hasFile('file')
                    fileVal: 'file',
                    pick: {
                        id: '#webuploader_picker',
                        //是否开启选择多个文件的能力(文章封面只要一个图片)
                        multiple: false,

                    }
                });
                this.uploader.on( 'uploadSuccess', ( file, ret ) => {
                    //图片路径
                    let src = ret.url;
                    //给表单添加value值 用来form入库
                    // $('#pic').val(src);
                    // //给图片添加src
                    // $('#img').attr('src', src);
                    this.info.pic = src;//操作虚拟dom
                });
            },
            methods: {
                async postupdate() {
                    //先把富文本编辑器的内容弄到body  它没有实现数据的双向绑定,只能自己手动来
                    this.info.body = this.ue.getContent()
                    //console.log(this.$refs.frmfuck) dom对象
                    // var frmfuckData = new FormData(this.$refs.frmfuck);待解决，后端得到是源form数据
                    var frmfuckData = JSON.stringify(this.info)
                    //let url = this.$refs.frmfuck.action
                    let url = "{{ route('admin.article.update', $article) }}"
                    let ret = await fetch(url, {
                        method: 'put',
                        headers: {
                            'X-CSRF-TOKEN':'{{ csrf_token() }}',
                            // 'Content-Type':'application/x-www-form-urlencoded'
                            'Content-Type': 'application/json',
                        },
                        body: frmfuckData
                    })
                    let json = await ret.json()
                    if (json.status == 0) {
                        location.href = json.url
                    }
                }
            }
        }).$mount('.page-container')







    </script>
@endsection
